<template>
  <div class="common-layout">
    <el-container>
      <el-header>
		  <div class="head">  </div>
		  <img :src="logo" alt="Logo Icon" class="logo-img" />  
		  <div class="text1">
			  <a class="head-content1" href="javascript:void(0)">首页</a>
			   <a class="head-content2" href="javascript:void(0)">资质费用</a>
		  </div>
		 <div class="container">
			 <div class="block">
			 <el-carousel height="520px">
			   <el-carousel-item v-for="(imageUrl, index) in imageUrls" :key="index">  
			      <el-image :src="imageUrl.src" fit="cover" class="back-img" style="height: 100%;width: 100%;" />    
			   </el-carousel-item>  
			 </el-carousel>  
		 	 </div>

		 <!-- 注册 -->
		 <div class="content">
			 <template v-if="registerform">
			 <el-form style="margin-top: 20px; padding-right: 3px;padding-left: 3px;" label-width="5px"  
			      ref="formRefForRegister"  
      			:model="formRegister"  
            :rules="rulesForRegister" >
		 	<div class="content-title"  >注册成为第三方（POP）卖家</div>
			<el-form-item prop="username">
					<el-input v-model="formRegister.username" placeholder="请输入邮箱" style="margin-top: 5%;"></el-input>
			</el-form-item>
			<div style="display: flex;">
				<el-form-item prop="captcha">
						<el-input v-model="formRegister.captcha" placeholder="请输入验证码" style="margin-top: 10%;"></el-input>
				</el-form-item>
				<el-form-item>
						<el-button style="margin-top: 10%; background-color: #fc9c93; color: white;font-size: 15px;" @click="sendEmailForRegister">{{buttonText}}</el-button>
				</el-form-item>
			</div>
		<el-form-item prop="password">
            <el-input v-model="formRegister.password" placeholder="请输入登录密码 " show-password	 style="margin-top: 10%;"></el-input>
		</el-form-item>	
		<div style="display: flex;justify-content: space-between;padding-left: 0%;padding-right: 0%;margin-top: 6%;font-size:13px;">
			<el-checkbox v-model="formRegister.ok">
			</el-checkbox>
			<div style="margin-top: 2%;">我已阅读并同意</div>
			<a style="margin-top: 2%;color:#ff0000;" href="javascript:void(0)">《未来蜂商家用户注册协议》</a>
		</div>
		 			<el-button style="width: 100%;margin-top: 5% ;" plain type="primary" @click="submitFormForRegister">立即注册</el-button>
		 	<div style="display: flex;justify-content: space-between;font-size: 13px;">
				<div style="margin-left: 5%;">查看已有入驻流程？</div>
		 		 <button style="border: none;background-color: white;color: red;"  type="button" @click="changeForm('login')">去登录</button>  
		 	</div>
			</el-form>
			</template>

			<!-- 登入 -->
			<template v-else-if="loginform">
			<el-form style="margin-top: 20px; padding-right: 1px;padding-left: 1px;" label-width="5px"
			       ref="formRefForLogin"  
      			 :model="formLogin"  
             :rules="rulesForLogin">
				<div style="margin-top: 20px;font-size: 1.35rem;margin-left: 20px;">密码登录</div>
				<el-form-item prop="username">
					<el-input v-model="formLogin.username" placeholder="请输入邮箱或手机号" style="margin-top: 5%;"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="formLogin.password" placeholder="请输入密码" style="margin-top: 10%;" show-password></el-input>
				</el-form-item>
				<el-form-item>
					 <button style="border: none;background-color: white;color: red;width: 60px;margin-left: auto;" type="button" @click="changeForm('for')">忘记密码</button>  
					<el-button style="width: 100%;margin-top: 5% ;" plain type="primary" @click="submitFormForLogin">立即登录</el-button>
					<div style="display: flex;justify-content: space-between;font-size: 13px;">
						<div style="margin-left: 3%;width: 200px;">没有店铺，0元开店？</div>
						 <button style="border: none;background-color: white;color: red;width: 100px;margin-right: 1%;" type="button" @click="changeForm('register')">去注册</button>  
					</div>
				</el-form-item>
			</el-form>
			</template>

				<!-- 忘记密码 -->
				<template v-else-if="forgetform">
				<el-form style="margin-top: 20px; padding-right: 1px;padding-left: 1px;" label-width="5px"
				    ref="formRefForForget"  
      			:model="formForget"  
            :rules="rulesForForget">
					<div style="margin-top: 20px;font-size: 1.35rem;margin-left: 20px;">找回密码</div>
						<el-form-item prop="email">
							<el-input v-model="formForget.email" placeholder="请输入邮箱" style="margin-top: 5%;"></el-input>
						</el-form-item>
					<div style="display: flex;">
						<el-form-item prop="captcha">
							<el-input v-model="formForget.captcha" placeholder="请输入验证码" style="margin-top: 10%;"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button :disabled="disabledRegister" style="margin-top: 10%; background-color: #fc9c93; color: white;font-size: 15px;" @click="sendEmailForForget">{{ buttonText }}</el-button>
						</el-form-item>
					</div>
						<el-form-item prop="password">
							<el-input v-model="formForget.password" placeholder="请输入新密码" style="margin-top: 10%;" show-password></el-input>
						</el-form-item>
						<el-form-item>
							<el-button style="width: 100%;margin-top: 10% ;" plain type="primary" @click="submitFormForForget">重置密码</el-button>
							<div style="display: flex;justify-content: space-between;font-size: 13px;">
								<div style="margin-left: 3%;width: 200px;">没有店铺，0元开店？</div>
								<button style="border: none;background-color: white;color: red;width: 100px;margin-right: 1%;" type="button" @click="changeForm('register')">去注册</button>  
							</div>
						</el-form-item>
				</el-form>
				</template>
			</div>
			</div>
	  </el-header>
      <el-main></el-main>
	  <el-footer>
		  <div class="footer-content-left">快速开店</div>
		  <div class="footer-content-right">成为第三方（POP）卖家</div>
	  </el-footer>
    </el-container>
  </div>
</template>


<script setup>  
import { ref,onBeforeUnmount } from 'vue';  
import logo from '@/components/components-zjm/logo2.png';  
import {reactive} from'vue';
import VueCookies from "vue-cookies"
import { ElMessage } from 'element-plus'
import { Path } from '@/constant';
import { get,post } from "@/plugins/axios"
import router from '@/router';
import { useUserStore } from '@/stores/pinia'
const userStore = useUserStore()
const imageUrls = ref([
	{src:'../../../public/smart.png'},
	{src:'../../../public/smart3.png'},
	{src:'../../../public/smart4.png'}
]); 
const disabledRegister = ref(false)
const buttonText = ref('发送验证码')
const countDown = ref(60)
let timer = null
 const startCountDown = ()=>{
	disabledRegister.value = true
	buttonText.value = `${countDown.value}s`
	timer = setInterval(()=>{
		countDown.value--
		if(countDown.value>0){
		buttonText.value =	`${countDown.value}s`
	  }else{
			resetCount()
		}
	},1000)
 }
 const resetCount =()=>{
	clearInterval(timer)
	buttonText.value='发送验证码'
	disabledRegister.value = false
	countDown.value = 60
 }
 onBeforeUnmount(()=>{
	if(timer){
		clearInterval(timer)
	}
})
// 注册
const formRefForRegister = ref(null);  
const formRegister = reactive({
	username:'',
	captcha:'',
	password:'',
	ok: false,
})
const rulesForRegister = {  
  username: [  
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },  
    { type: 'email', message: '请输入有效的电子邮箱地址', trigger: ['blur', 'change'] }  
  ],  
  captcha: [  
    { required: true, message: '请输入验证码', trigger: 'blur' }  
  ],  
  password: [  
    { required: true, message: '请输入密码', trigger: 'blur' }  
  ]  
}; 
function sendEmailForRegister(){
	startCountDown()
  get(Path.emailCheck,{column:'email',value: formRegister.username},content => {
	   if(content){
			post(Path.sendEmail,{to:formRegister.username,state:'商家注册'},content => {
				ElMessage({
					message: '验证码已经发送到您的邮箱，请注意查看 ',
					type: 'success'
				})
			})
		} else {
			ElMessage({
				message: '该邮箱已经被使用！',
				type: 'warning',
			})
		}}	
	)
}
function submitFormForRegister() {  
	if( formRegister.ok){
		formRefForRegister.value.validate((valid) => {  
    if (valid) {  
        post(Path.registration,{
					email:formRegister.username,
				  password:formRegister.password,
					code:formRegister.captcha,
				  role:3},content => {
						changeForm('login')
					})
    } else {  
      return false;  
    }  
  });  
	} else {
		ElMessage({
				message: '请先阅读未来蜂商家注册协议！',
				type: 'warning',
			})
	}
}   

// 修改密码  
const formRefForForget = ref(null)
const formForget = reactive({
	email:'',
	captcha:'',
	password:''
})
const rulesForForget = {  
  email: [  
    { required: true, message: '请输入邮箱或手机号', trigger: 'blur' },
	  { type: 'email', message: '请输入有效的电子邮箱地址', trigger: ['blur', 'change'] }  
  ],  
  captcha: [  
    { required: true, message: '请输入验证码', trigger: 'blur' }  
  ],
	password: [  
    { required: true, message: '请输入新密码', trigger: 'blur' }  
  ]  
};
function sendEmailForForget(){
	startCountDown()
  get(Path.emailCheck,{column:'email',value:formForget.email},content => {
	   if( !content ){
			post(Path.sendEmail,{to:formForget.email,state:'修改密码'},content => {})
		} else {
			ElMessage({
				message: '该邮箱未曾注册过账号',
				type: 'warning',
			})
		}}	
	)
}
function submitFormForForget() {  
  formRefForForget.value.validate((valid) => {  
    if (valid) {  
       post(Path.fixPassword,{
				username: formForget.email,
				password: formForget.password,
				code: formForget.captcha
			 },content => {
			   changeForm('login')
			 })
    } else {  
      return false;  
    }  
  });  
}

// 登入
const formRefForLogin = ref(null)
const formLogin = reactive({
	username:'',
	password:'',
})
const rulesForLogin = {  
  username: [  
    { required: true, message: '请输入邮箱或手机号', trigger: 'blur' }  
  ],  
  password: [  
    { required: true, message: '请输入密码', trigger: 'blur' }  
  ]  
};
function submitFormForLogin() {  
  formRefForLogin.value.validate((valid) => {  
    if (valid) {  
       post(Path.login,{
				username: formLogin.username,
				password: formLogin.password,
				type: '商家登入'
			 },content => {
				VueCookies.set('token', content.token, { expires: '1D' })
				VueCookies.set('role', 'merchant', { expires: '1D' })

				get(Path.checkPhone,{
					openId: content.openId
				},content => {
					if(!content){
						// 需要完善信息
						router.push("/merchant-completeInformation")
					} else {
						// 不需要完善信息
						router.push("/shop/myproduct")
						userStore.setLoginUser()
					}
				})		
			 })
    } else {  
      return false;  
    }  
  });  
}






const registerform= ref(true);
const loginform= ref(false); 
const forgetform= ref(false);
function changeForm(type) {
	if (type === 'login') {  
		registerform.value = false;  
		loginform.value = true;
		forgetform.value=false;
	} else if (type === 'register') {  
		registerform.value = true;  
		loginform.value = false;
	forgetform.value=false;
	}
else if (type === 'for') {
	registerform.value = false;  
	loginform.value = false;
	forgetform.value=true;
}  
}  
    
</script>


<style scoped lang="scss">
	.common-layout{
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.el-header{
		width: 100%;
		height: 68.5%;
		padding-left: 0%;
		padding-right: 0%;
		 
		background-color: #2986f5;
		.head{
			z-index: 1;
			position: absolute;	
			  opacity: 0.25;
			width: 100%;
			height: 13%;
			background-color: white;
			align-items: center;
		display: flex;
		justify-content: space-between;
		
		}
		.logo-img{
			
			 opacity: 0.7;
			height: auto;
			margin-left: 3%;
			width: 15.125rem;
			margin-top: 1.5%;
		}
		.text1{
			z-index: 2;
			margin-top: -70px;
			margin-left: 400px;
		.head-content1{
			 text-decoration: none;
			color: white;
			font-weight: 900;
			font-size: 2.5rem;
			margin-top: 0%;
			margin-left: 10%;
		}
		.head-content2{
			 text-decoration: none;
			color: white;
			font-weight: 900;
			font-size: 2.5rem;
			margin-left: 3%;
		}
		}
		.container{
			
		display: flex;
		padding-right: 100px;
			.block{
			margin-top: 2.5%;
				width: 75%;
		
			}
		.content{
			margin-top: 5.5%;
			width: 20.7rem;
			height: 24rem;

			background-color: white;
			border-radius: 13px;
			padding: 1.5rem;
			.content-title{
				text-align: center;
				font-size: 1.25rem;
			}
		}
		}
	}
	
	.el-main{
		width: 100%;
		height: 11.5%;
		display: inline-block;
		vertical-align: top;  
		background: linear-gradient(#2986f5, white);
	}
	.el-footer{
		width: 100%;
		height: 19%;
		display: flex;
		justify-content: space-around; 
		background-color: white;
		.footer-content-left{
			font-size: 2.4rem;
			color: #ff0010;
			margin-top: 2.5%;
			font-weight: 1500;
			margin-left: 30%;
			font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		}
		.footer-content-right{
			font-size: 2.4rem;
			margin-top: 2.5%;
			margin-right: 26%;
			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		}
	}
	 
</style>

